<!-- 核销-组件模板 -->
<template>
	<view class="salesDoms">
		<!-- 基础表单校验 -->
		<view class="formDoms">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="门店" required name="shopName">
					<superwei-combox
						v-model="valiFormData.shopName" 
						:candidates="shopingList" 
						:isJSON="true" 
						:isAllowCreate="false"
						keyName="name" 
						placeholder="请选择门店" 
						@select="xPChange">
					</superwei-combox>
				</uni-forms-item>
				<uni-forms-item label="客户" required name="customerName">
					<uni-easyinput v-model="valiFormData.customerName" placeholder="请输入客户" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<view class="marginBottom20">
					<view class="marginBottom20">
						<button type="primary" @click="toSelectRoute('/pages/sales/components/comboSales', '1')">添加套组核销</button>
					</view>
					<view v-if="orderDtlList.length > 0">
						<view v-for="(item,index) in orderDtlList" :key="index" class="itemDoms">
							<!-- 列表信息 -->
							<view class="flexDom alignItems marginBottom20">
								<text class="color666">门店名称：</text>
								<text class="flexOne marginRight10">{{item.shopName}}</text>
								<text class="colorRed" @click="deleteShop(index, '1')">删除</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">客户姓名：</text>
								<text>{{item.customerName}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="marginRight30 color666">商品：</text>
								<text class="flexOne textRight">{{item.productName}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="marginRight30 color666">商品数量：</text>
								<text class="flexOne textRight">{{item.productCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">服务总次数：</text>
								<text>{{item.totalServiceCount?item.totalServiceCount:'未设置'}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">剩余服务次数：</text>
								<text class="colorRed">{{item.remainServiceCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">本次服务次数：</text>
								<text>{{item.useCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">备注：</text>
								<text>{{item.remark}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="marginBottom20">
					<view class="marginBottom20">
						<button type="primary" @click="toSelectRoute('/pages/sales/components/cardSales', '2')">添加体验卡核销</button>
					</view>
					<view v-if="expCardList.length > 0">
						<view v-for="(item,index) in expCardList" :key="index" class="itemDoms">
							<!-- 列表信息 -->
							<view class="flexDom marginBottom20">
								<text class="color666">门店名称：</text>
								<text class="flexOne marginRight10">{{item.shopName}}</text>
								<text class="colorRed" @click="deleteShop(index, '2')">删除</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">客户姓名：</text>
								<text>{{item.customerName}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">服务总次数：</text>
								<text>{{item.totalCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">剩余服务次数：</text>
								<text>{{item.totalCount-item.useCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">本次服务次数：</text>
								<text>{{item.useCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">备注：</text>
								<text>{{item.remark}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="marginBottom20">
					<view class="marginBottom20">
						<button type="primary" @click="toSelectRoute('/pages/sales/components/additionalSales', '3')">添加附加项目核销</button>
					</view>
					<view v-if="extraProjectList.length > 0">
						<view v-for="(item,index) in extraProjectList" :key="index" class="itemDoms">
							<!-- 列表信息 -->
							<view class="flexDom marginBottom20">
								<text class="marginRight30 color666">项目名称：</text>
								<text class="flexOne textRight marginRight10">{{item.projectName}}</text>
								<text class="colorRed" @click="deleteShop(index, '3')">删除</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">本次服务次数：</text>
								<text>{{item.useCount}}</text>
							</view>
							<view class="flexDom marginBottom20">
								<text class="flexOne color666">备注：</text>
								<text>{{item.remark}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="marginBottom20">
					<view class="marginBottom20">
						<button type="primary" @click="toSelectRoute('/pages/sales/components/sign', '4')">客户签字</button>
					</view>
					<view v-if="valiFormData.sign">
						<image :src="valiFormData.sign" mode="aspectFit"></image>
					</view>
				</view>
				<view class="colorRed fontSize12">注意：至少选择一个核销项目。</view>
			</uni-forms>
		</view>
		<view class="signDoms">
			<button type="primary" @click="submit('valiForm')">确认提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopingList: [{id: 100, name: "测试门店"}],  // 门店列表
				orderDtlList: [],  		//  添加套组核销
				expCardList: [],  		// 添加体验卡核销
				extraProjectList: [],  	// 添加附加项目核销
	 			// 校验表单数据
				valiFormData: {
					shopId: '',  		//  门店ID
					shopName: '',  		//  门店名称
					customerName: '',  	//  客户姓名
					remark: '',   		//  备注
					sign: '',  				// 客户签字
					orderDtlList: [],  		//  添加套组核销
					expCardList: [],  		// 添加体验卡核销
					extraProjectList: []  	// 添加附加项目核销
				},
				// 校验规则
				rules: {
					shopName: {
						rules: [{
							required: true,
							errorMessage: '门店不能为空'
						}]
					},
					customerName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					}
				}
			};
		},
		onLoad() {
			// 初始化-数据
			this.initData();
		},
		methods: {
			/** 初始化-表单函数 */
			initData() {
				let urls = this.$apiNames.KH_SHOP_LIST;
				urls += "?pageIndex=0&pageSize=1000";
				// 请求门店列表-api
				this.$myHttps(urls).then(res => {
					// console.log("请求门店列表：", res);
					if(res.code == 0) {
						// 赋值
						this.shopingList =  res.data;
					} else {
						this.$Msg(res.msg);
					}
				});
			},
			
			/** 删除-按钮-事件 */
			deleteShop(index, flag) {
				// 套组核销
				if(flag == '1') {
					// 删除当前Form数据
					this.valiFormData.orderDtlList.splice(index, 1);
					// 删除显示的数据
					this.orderDtlList.splice(index, 1);
				} else if(flag == '2') {
					// 体验卡核销
					// 删除当前Form数据
					this.valiFormData.expCardList.splice(index, 1);
					// 删除显示的数据
					this.expCardList.splice(index, 1);
				} else {
					// 附加核销
					// 删除当前Form数据
					this.valiFormData.extraProjectList.splice(index, 1);
					// 删除显示的数据
					this.extraProjectList.splice(index, 1);
				}
			},
			
			/** 提交-按钮-事件 */
			submit(form) {
				this.$refs[form].validate().then(res=>{
					// console.log('表单数据信息：', res);
					if(
						this.valiFormData.orderDtlList.length > 0 ||  
						this.valiFormData.expCardList.length > 0 ||
						this.valiFormData.extraProjectList.length > 0
					) {
						if(!this.valiFormData.sign) {
							// 提示信息
							this.$Msg("请客户签字确认！");
							return
						}
						this.$myHttps(this.$apiNames.KH_SIGNSERVICE_SAVE, this.valiFormData).then(res => {
							if(res.code == 0) {
								// 提示信息
								this.$Msg(res.msg ? res.msg : "核销成功~");
								// 返回首页
								this.toSelectRoute("/pages/index/index");
							} else {
								this.$Msg(res.msg ? res.msg : '核销系统错误，请联系管理员~');
							}
						})
					} else {
						// 提示信息
						this.$Msg("请至少选择一个核销项目！");
					}
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			
			/**
			 * 省选择数据-值变化-事件
			 */
			xPChange(data) {
				// console.log("省选择数据:", data);
				// 清空，上次城市的数据
				this.valiFormData.shopId = data.id;
			},
			
			/** 核销-按钮-事件 */
			toSelectRoute(url, flag) {
				// 如果是【套组核销】
				if(flag == '1' || flag == '2') {
					this.$refs.valiForm.validate().then(res=>{
						url += "?shopId=" + this.valiFormData.shopId;
						url += "&shopName=" + this.valiFormData.shopName;
						url += "&customerName=" + this.valiFormData.customerName;
						// 跳转-首页
						this.$RouterTo(url);
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				} else {
					// 跳转-首页
					this.$RouterTo(url);
				}
			},
			
			/** 
			 * 其它页面，选项返回的数据
			 * @param {Object} obj : 页面返回回填的数据对象
			 * @param {String} flag : 判断回填位置的参数；1、添加套组核销；2、添加体验卡核销；3、添加附加项目核销；4、客户签字
			 */
			selectPagesData(obj, flag) {
				//console.log("您选择了：", obj, flag);
				if(flag == '1') {
					let item = {
						orderDtlId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.orderDtlList.push(obj);
					this.valiFormData.orderDtlList.push(item);
				}
				if(flag == '2') {
					let item = {
						expcardSaleId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.expCardList.push(obj);
					this.valiFormData.expCardList.push(item);
				}
				if(flag == '3') {
					let item = {
						extraProjectId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.extraProjectList.push(obj);
					this.valiFormData.extraProjectList.push(item);
				}
				// 客户签名，图片base64字符串
				if(flag == '4') {
					this.valiFormData.sign = obj.sign;
				}
				console.log("最终表单数据：", this.valiFormData);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.salesDoms {
		.formDoms {
			background-color: #ffffff;
			border-radius: 10upx;
			box-sizing: border-box;
			padding: 40upx 20upx 140upx;
			margin: 30upx 30upx 100upx;
		}
		.signDoms {
			position: fixed;
			width: 100%;
			bottom: 20upx;
			padding: 0 50upx;
			box-sizing: border-box;
		}
		.itemDoms {
			padding: 20upx 20upx 0 20upx;
			margin-bottom: 30upx;
			border: 1px solid #eeeeee;
			border-radius: 10upx;
		}
	}
</style>
